<template>
	<view class="clearfix">
		<view class="history">
			<view class="top">
				<text class="com_title">历史记录</text>
				<button class="icon" @click="delList">
					<!-- <text class="uniicons iconuni">&#xe401;</text> -->
					<uni-icons type="trash" :size="20"></uni-icons>
				</button>
			</view>
			<view class="his_list">
				<button class="his_item" v-for="item in hisList" :key="item.id" hover-class="item_hover" @click="toResutl(item.keyWord)">
					{{item.keyWord}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hisList:[]
			};
		},
		onLoad() {
			this.getSearList()
		},
		methods:{
			//点击历史纪录
			toResutl(text) {
				uni.navigateTo({
					url:"/pages/search/result?text=" + text
				})
			},
			//删除搜索记录
			delList() {
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定删除全部搜索记录',
				    success: function (res) {
				        if (res.confirm) {
				            that.$api.delSearList().then(()=> {
				            	uni.showToast({
				            		title: "删除成功",
				            		icon:"success",
				            		duration: 2000
				            	});
								that.hisList = [];
				            })
				        } else if (res.cancel) {
				            uni.showToast({
				            	title: '取消删除',
				            	icon:"none",
				            	duration: 2000
				            });
				        }
				    }
				});
			},
			//获取搜索记录
			getSearList() {
				this.$api.getSearList({}).then(res=> {
					this.hisList = res.data.data;
				})
			}
		},
		//搜索输入框
		onNavigationBarSearchInputConfirmed(obj) {
			if(obj.text == ""){
				uni.showToast({
					title: '请填写搜索内容',
					icon:"none",
					duration: 2000
				});
				return
			}
			uni.navigateTo({
				url:"/pages/search/result?text=" + obj.text
			})
		},
		//取消按钮
		onNavigationBarButtonTap(obj) {
			uni.navigateBack({})
		}
	}
</script>
<style>
	page{padding: 0 30rpx;box-sizing: border-box;}
</style>
<style lang="scss" scoped>
	.history{
		.top{display: flex;justify-content: space-between;align-items: center;margin: 50rpx 0 30rpx;
			.icon{width: 36rpx;height: 36rpx;margin: unset;padding: unset;line-height: 36rpx; flex-shrink: 0;}
			.iconuni{font-size: 36rpx;}
		}
		.his_item{font-size: 28rpx;color: #333333;padding: 12rpx 30rpx;
			line-height: 1;border-radius: 30rpx;float: left;background: #f6f6f6;margin:0 20rpx 20rpx 0;}
		.item_hover{opacity: 0.2;}
	}
</style>
